#{extends 'main.html' /}
#{set title: interventionToDisplay.subjectIntervention /}
#{set 'moreStyles'}
		
        #{stylesheet 'jRating.jquery.css' /}
		#{stylesheet 'form_modal.css' /}
		#{stylesheet 'upload_img.css' /}
        #{stylesheet 'itv_display_request.css' /}
        #{stylesheet 'dashboard.css' /}
        #{stylesheet 'tabs.css' /}
#{/set}
#{set 'moreScripts'}
        #{script 'piechart.js' /}
        #{script 'jRating.jquery.js' /}
#{/set}
<script>
$(function(){
$(document).ready(function(){
	$('.notation').jRating({
		step:true,
		length : 5,
		rateMax : 5
	});
});
});
</script>

<section>
	<div id="container_data">
		<div class="row">
			<div class="span10 offset1">
				<div class="row">
					<div class="span2">
						<img src="@{Interventions.image(interventionToDisplay.enseignantIntervention.id)}" class="img-polaroid">
					</div>
					<div class="span6">
						<div class="row"><h2>${interventionToDisplay.subjectIntervention}</h2></div>
						<div class="row">
							<small>
								par 
								<strong>
									<a href="/Profil/${interventionToDisplay.enseignantIntervention.id}/${interventionToDisplay.enseignantIntervention.lastNameUser +' '+interventionToDisplay.enseignantIntervention.firstNameUser}">${interventionToDisplay.enseignantIntervention.lastNameUser} ${interventionToDisplay.enseignantIntervention.firstNameUser}</a>
								</strong>
								// ${interventionToDisplay.createdAt.format("dd MMMM yyyy")}
							</small>
						</div>
					</div>
					<div class="span1">
<!-- 						<ul class="tt-wrapper">
							#{if session['user_statut'] == "Enseignant"}
							<li><a class="tt-linkedin" href="#"><span>Modifier</span></a></li>
							#{/if}
							#{if session['user_statut'] == "Student"}
							%{ 
								alreadyEvaluate = false; 
								for(evaluation in interventionToDisplay.listEvaluation2Intervention){
									if(evaluation.studentEvaluation2.id == session["user_id"]){
										alreadyEvaluate = true;
										break;
									}
								}
							}%
							#{if alreadyEvaluate = false}
							
							<li><a class="tt-twitter" href="#modal" data-toggle="modal"><span>Evaluer !</span></a></li>
							#{/if}
							#{/if}
						</ul> -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row-fluid" id="info">
	    <ul>
	    	<li class="span2"><span><img src="@{'/public/images/appbar.clock.png'}"/></span><large>${interventionToDisplay.durationIntervention}</large><small>Heures</small></li>
	        <li class="inextremist span2"><span><img src="@{'/public/images/appbar.star.png'}"/></span><large>${interventionToDisplay.listEvaluation2Intervention.size()}</large><small>Evaluations</small></li>
	        <li class="inextremist span2">
	        	<span><img src="@{'/public/images/appbar.chat.png'}"/></span>
	        	<large>
	        	%{ nb = 0; }%
	        	#{list interventionToDisplay.listEvaluation2Intervention, as:'evaluation'}
	        		#{if evaluation.commentaire != ""}
	        			%{ nb += 1; }%
	        		#{/if}
	        	#{/list}
	        	${nb}
	        	</large>
	        	<small>Commentaires</small></li>
	        <li class="inextremist span2"><span><img src="@{'/public/images/appbar.graph.line.up.png'}"/></span><large>${interventionToDisplay.moyenneGenerale * 20 / 5}</large><small>Moyenne G&eacute;n&eacute;rale</small></li>
	    </ul>
	</div>
	<div  class="tabs">
		<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
		<label for="tab-1" class="tab-label-1">Description</label>

		<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
		<label for="tab-2" class="tab-label-2">Stats</label>

		<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
		<label for="tab-3" class="tab-label-3">Commentaires</label>
	
		<div class="clear-shadow"></div>
		
		<div class="content">
			<div class="data content-1">
				<h3>Description</h3>
				<p>${interventionToDisplay.descriptionIntervention}</p>
			</div>
			<div class="data content-2">
				<h3>R&eacute;partition des notes</h3>
				<p id="graph"></p>
			</div>
			<div class="data content-3">
				<h3>Commentaires</h3>
				#{list interventionToDisplay.listEvaluation2Intervention, as:'evaluation'}
					#{if evaluation.commentaire != ""}
					<div class="row commentaires">
						<div class="span2">
							<img class="img-polaroid" src="@{Interventions.image(evaluation.studentEvaluation2.id)}"/></span>
						</div>
						<div class="span9">
							<p>
								<a href="/Profil/${evaluation.studentEvaluation2.id}/${evaluation.studentEvaluation2.lastNameUser +' '+evaluation.studentEvaluation2.firstNameUser}">${evaluation.studentEvaluation2.firstNameUser +" "+ evaluation.studentEvaluation2.lastNameUser}</a> // ${evaluation.createdAt.format("dd MMMM yyyy") +" @ "+ evaluation.createdAt.format("H:m")}
								<br/>
								${evaluation.commentaire}
							</p>
						</div>						
					</div>
					#{/if}
				#{/list}
			</div>
		</div>
	</div>
	  #{if flash.success}
          <div class="alert span3 alert-success"">${flash.success}</div>
      #{/if}
</section>
		<!-- Modal -->
		<div id="modal-evaluate" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

			#{include 'evl_form_request.html' /}
	    </div>

<script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});
      
      $(".tabs").ready(function(){
    	  google.setOnLoadCallback(drawChart);
    	
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Critere', 'Moyenne'],
			#{list interventionToDisplay.moyenneGeneraleAllCritere.keySet(), as:'key'}
				['${key}',${interventionToDisplay.moyenneGeneraleAllCritere.getAt(key)}],
			#{/list}
        ]);

        var options = {
        	backgroundColor : 'none',
        	is3D : true,
        	width:800,
        height: 500,
        chartArea : {left:"25%",top:0,width:"70%",height:"60%"}
        };

        var chart = new google.visualization.PieChart(document.getElementById('graph'));
        chart.draw(data, options);
        
      }
	});
</script>